<template>
  <div id="main" ref="main">

  </div>

</template>

<script>
import * as echarts from 'echarts';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
import {getinfor} from "@/api/overview";

export default {
  props: {
    useList: {
      type: Array,
      default: () => []
    }
  },
  created() {
    echarts.use([
      TitleComponent,
      TooltipComponent,
      GridComponent,
      DatasetComponent,
      TransformComponent,
      BarChart,
      LabelLayout,
      UniversalTransition,
      CanvasRenderer
    ]);
  },
  mounted() {
    var myChart = echarts.init(this.$refs.main);
    getinfor().then(res => {
      let option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['前六天', '前五天', '前四天', '前三天', '前两天', '前一天', '今日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: res.data.userList.slice(6, 14),
            type: 'line',
            areaStyle: {},

          }
        ]
      };

      myChart.setOption(option)
    })

  }

};
</script>

<style scoped>
#main {
  width: 100%;
  height: 300px;
  margin: 9px;
  background-color: white;
  border-radius: 13px;

}
</style>
